<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :custom-class="'panna-dialog_big'"
      title="实验记录单引用"
      align="center"
      :visible.sync="innerRecordDialogFormVisible"
      @closed="closeRecordDialog"
    >
      <div class="basic-info search">
        <!-- 实验记录单 未引用和已引用合并，jiang 2024-05-29 -->

        <el-table
          ref="tableData"
          :data="tableData"
          element-loading-text="Loading"
          class="filter unsetborder"
          :class="{ 'show-filter': showFilterRow }"
          height="calc(92%)"
          fit
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" title="引用">
            <el-table-column type="selection"></el-table-column>
          </el-table-column>

          <el-table-column align="center" width="50">
            <template #header>
              <div class="filter-icon" title="筛选">
                <SvgIcon
                  class-name="filter"
                  icon-class="filter"
                  @click="filterIconClick"
                />
              </div>
            </template>
            <el-table-column width="50"></el-table-column>
          </el-table-column>

          <el-table-column label="记录编号">
            <el-table-column prop="experimentNumber">
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="queryForm.experimentNumber"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
              <template slot-scope="scope">
                {{ scope.row.experimentNumber }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="模板名称">
            <el-table-column>
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="queryForm.templateName"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
              <template slot-scope="scope">
                {{ scope.row.templateName }}
              </template>
            </el-table-column>
          </el-table-column>
          <!-- <el-table-column label="样品类别">
            <template slot-scope="scope">
              {{ scope.row.sampleCategoryName }}
            </template>
          </el-table-column>
          <el-table-column label="品号">
            <template slot-scope="scope">
              {{ scope.row.articleNumber }}
            </template>
          </el-table-column> -->
          <el-table-column label="检测项目">
            <el-table-column>
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="queryForm.detectionItemName"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>

              <template slot-scope="scope">
                {{ scope.row.detectionItemName }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="样品编号">
            <el-table-column>
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="queryForm.sampleNumber"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
              <template slot-scope="scope">
                {{ scope.row.sampleNumber }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="检测人">
            <el-table-column>
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="queryForm.testerName"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
              <template slot-scope="scope">
                {{ scope.row.testerName }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="是否关联">
            <el-table-column>
              <template #header>
                <el-select
                  v-if="showFilterRow"
                  v-model="queryForm.associatioStatus"
                  @change="getList"
                >
                  <el-option value="-1" label="全部"></el-option>
                  <el-option value="1" label="已关联"></el-option>
                  <el-option value="0" label="未关联"></el-option>
                </el-select>
              </template>
              <template slot-scope="scope">
                {{ scope.row.associationName }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="生成时间">
            <el-table-column label="">
              <template #header>
                <el-date-picker
                  v-model="queryForm.createTimeRang"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </template>
              <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <el-table-column width="180">
              <template #header>
                <div v-if="showFilterRow" class="search-operate">
                  <el-link type="primary" @click="getList">搜索</el-link>
                  <el-link @click="cancelForm">清空</el-link>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="base-table-operation">
                  <el-link type="primary" @click="handleEdit(scope.row, true)"
                    >查看</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </el-table-column></el-table
        >
        <!-- 分页 -->
        <BasePagination
          :total="total"
          :current-page="pagination.pageIndex"
          :page-size="pagination.pageSize"
          @sizeChange="sizeChange"
          @changePage="currentChange"
        />
        <!-- <br /><br /> -->
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑页面 -->
    <ExperimentTemplateRecordEdit
      v-if="dialogFormVisibleEdit"
      ref="ExperimentTemplateRecordEdit"
      v-model="recordFormData"
      :page-view-mode="pageViewMode"
      :dialog-form-visible.sync="dialogFormVisibleEdit"
      :readonly="readonly"
      :auto-down-zip="autoDownZip"
      :transparency.sync="transparency"
    />
  </div>
</template>
<script>
import {
  GetListByResultIn,
  getSingleList
} from "../../api/ELN/ExperimentTemplateRecord";
import { getUserListNoPage } from "../../api/Permission/PermissionUser.js";

import { deepClone } from "../../utils";

import ExperimentTemplateRecordEdit from "@/ModuleEln/ModuleEln/views/ModuleEln/ExperimentTemplateRecord/ExperimentTemplateRecordEdit.vue";
export default {
  name: "ExperimentTemplateRecordDialog",
  components: {
    ExperimentTemplateRecordEdit,
  },
  props: {
    taskId: {
      type: String,
      default: "",
    },
    sampleInfoId: {
      type: String,
      default: "",
    },
    detectionItemId: {
      type: String,
      default: "",
    },
    experimentPagination: {
      type: Object,
      default: () => { },
    },
    experimentTemplateRecordIdList: {
      type: Array, // 布尔
      default: () => [], // 必填
    },
    recordDialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
  },
  data() {
    return {
      activeName: "first",
      transparency: true,
      showFilterRow: false,
      queryForm: {
        sampleNumber: undefined,
        articleNumber: undefined,
        testerName: undefined,
        quoteFlag: undefined,
        recordIds: undefined,
        joinStatus: undefined,
        sampleInfoId: undefined,
        experimentNumber: "",
        templateName: "",
        detectionItemName: "",
        startCreateTime: null,
        endCreateTime: null,
        associatedSampleTag: "-1",
        createTimeRang: [],
        associatioStatus: "-1"
      },

      loadPage: true,
      tableData: [],
      tableDatas: [],
      recordFormData: null,
      loading: false,
      pageViewMode: "runtime",
      readonly: false,
      innerRecordDialogFormVisible: false,
      dialogFormVisibleEdit: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,

      recordData: [],
      userList: [],
      searchUserLoading: false,
    };
  },
  watch: {},
  created() {
    this.innerRecordDialogFormVisible = this.recordDialogFormVisible;
    this.pagination.pageIndex = this.experimentPagination.pageIndex;
    this.pagination.pageSize = this.experimentPagination.pageSize;
    // 查询ELN域名
    // 查询字典表判断系统类型;
    // getConfigByKey("ELN").then((res) => {
    //   this.queryForm.url = res.data[0].value;
    //
    // });
    //  this.queryForm.sampleInfoId =this.sampleInfoId
    // this.queryForm.entrustTaskId = this.taskId;
    // this.handleClick();
    this.getList();
  },
  methods: {
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    closeDialog() {
      this.closeRecordDialog(0);
    },
    // 确定
    onSubmit() {
      debugger
      this.recordData = this.tableDatas;
      this.closeRecordDialog(1);
    },
    // 多选
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    onQuery() {
      this.getList();
    },
    // 清空筛选条件
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.getList();
    },
    // 获取实验记录单
    getList() {
      this.loading = true;
      if (this.queryForm.createTimeRang.length > 0) {
        this.queryForm.startCreateTime = this.queryForm.createTimeRang[0]
        this.queryForm.endCreateTime = this.queryForm.createTimeRang[1]
      }
      this.queryForm.detectionItemId = this.detectionItemId;
      this.queryForm.sampleInfoId = this.sampleInfoId;
      GetListByResultIn(this.queryForm, this.pagination).then(
        (res) => {
          this.loading = false;
          if (res.data != null) {
            this.tableData = []
            var dataList = res.data.dataList;
            this.total = res.data.total;

            if (dataList !== null && dataList.length !== 0) {
              if (this.experimentTemplateRecordIdList !== null && this.experimentTemplateRecordIdList.length !== 0) {
                var hasOne = dataList.filter(item => { return this.experimentTemplateRecordIdList.indexOf(item.id) >= 0 })

                var nohas = dataList.filter(item => { return this.experimentTemplateRecordIdList.indexOf(item.id) < 0 })

                hasOne.map(item => {
                  this.tableData.push(item)
                })

                nohas.map(item => {
                  this.tableData.push(item)
                })
                for (
                  let o = 0;
                  o < this.experimentTemplateRecordIdList.length;
                  o++
                ) {
                  for (let i = 0; i < dataList.length; i++) {
                    if (this.tableData[i].id === this.experimentTemplateRecordIdList[o]) {
                      this.$nextTick(function() {
                        this.$refs.tableData.toggleRowSelection(
                          this.tableData[i],
                          true
                        );
                      });
                    }
                  }
                }
                // this.$emit("update:experimentTemplateRecordIdList", null);
              } else {
                this.tableData = dataList;
              }
            }
          } else {
            this.tableData = [];
            this.total = 0;
          }
        }
      ).catch(res => {
        this.loading = false;
      });
    },
    // 切换页码
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    // 点击实验编号名称
    clickExperimentNumber(data) {
      var arr = [];
      arr.push(data);
      this.recordData = arr;
      this.closeRecordDialog();
    },
    // state：1点的是确定，0点的是取消
    closeRecordDialog(state) {
      this.innerRecordDialogFormVisible = false;
      this.$emit("update:recordDialogFormVisible", false);
      this.$emit("recordClose", this.recordData, this.pagination, state);
    },
    // 编辑/查看
    handleEdit(rowData, readonly) {
      getSingleList({ Id: rowData.id }).then((res) => {
        this.autoDownZip = false;
        this.pageViewMode = "runtime";
        this.recordFormData = deepClone(res.data);
        this.readonly = !!readonly;
        this.dialogFormVisibleEdit = true;
      });
    },
    getUser(name = "") {
      return new Promise((resolve) => {
        getUserListNoPage({ name }).then((res) => {
          resolve(res);
        });
      });
    },
    // 搜索人员
    async remoteUser(query) {
      this.searchUserLoading = true;
      const filter = await this.getUser(query);
      if (filter && filter.data) {
        this.userList = filter.data || [];
      }
      this.searchUserLoading = false;
    },
  },
};
</script>
<style scoped>
.search {
  text-align: left;
}
</style>
